<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗示例</title>
<link rel="stylesheet" type="text/css" href="teststyle.css">
</head>
<body>

    <h1>弹窗示例</h1>
    <button id="openModal">打开弹窗</button> <!-- 按钮触发弹窗 -->

    <!-- 弹窗 -->
    <div class="overlay" id="modalOverlay">
        <div class="modal">
            <h2>弹窗标题</h2>
            <p>这是弹窗的内容。</p>
            <span class="close-btn" id="closeModal">关闭</span> <!-- 关闭按钮 -->
        </div>
    </div>

    <script>
        // 获取元素
        const openModal = document.getElementById('openModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const closeModal = document.getElementById('closeModal');

        // 打开弹窗
        openModal.addEventListener('click', () => {
            modalOverlay.style.display = 'flex'; // 显示弹窗
        });

        // 关闭弹窗
        closeModal.addEventListener('click', () => {
            modalOverlay.style.display = 'none'; // 隐藏弹窗
        });
    </script>

</body>
</html>
